<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { getJoin, getOpen, getRoom, RoomItem } from '../../api';

const BASE_PATH = import.meta.env.VITE_API_BASE_PATH;

const router = useRouter();
const userVisiable = ref(false)
const createRoomVisiable = ref(false)
const username = ref('')
const roomname = ref('')
const imageUrl = 'https://tdesign.gtimg.com/site/avatar.jpg';

const list = ref<RoomItem[]>([
])

const onBack = () => {
    router.back()
}
const onEnter = async (i:RoomItem) => {
    if (username.value === '') {
        userVisiable.value = true
        return
    }
    try {
        await getJoin(i.name || "",username.value)
        router.push({ path: BASE_PATH + '/', query: { model: 'online', room: i.name,username:username.value } })
    } catch (error) {
        console.log(error);
    }
}
const onCreatRoom = async () => {
    await getOpen(roomname.value,username.value)
    getRoomList()
}
const getRoomList = async ()=>{
    const res = await getRoom()
    list.value = res.data
}
const onCreateRoomConfirm = ()=>{
    onCreatRoom()
    getRoomList()
    createRoomVisiable.value = false
}
const onUserConfirm = ()=>{
    userVisiable.value = false
    localStorage.setItem("username",username.value)
    // pass
}
onMounted(()=>{
    username.value = localStorage.getItem("username") || ''
    getRoomList()
    if (username.value === '') {
        userVisiable.value = true
        return
    }
})
</script>
<template>
    <div class="center-page" style="width: 50%;">
        <t-list :split="true">
            <template #header>
                <t-space align="center">
                    <t-button variant="text" theme="default" @click="onBack">
                        返回
                    </t-button>
                    游戏大厅
                </t-space>

            </template>
            <t-list-item v-for="i in list" :key="i.name">
                <t-list-item-meta :image="imageUrl" :title="i.name" :description="i.count + '/2'" />
                <template #action>
                    <span>
                        <t-link theme="primary" hover="color" style="margin-left: 16px"
                            @click="() => onEnter(i)">加入游戏</t-link>
                    </span>
                </template>
            </t-list-item>
            <template #footer>
                <t-space>
                    <t-button variant="text" theme="default" @click="createRoomVisiable = true">
                        创建房间
                    </t-button>
                    <t-button variant="text" theme="default" @click="getRoomList">
                        刷新列表
                    </t-button>
                </t-space>
            </template>
        </t-list>

    </div>
    <t-dialog :visible="createRoomVisiable" :close-btn="true" confirm-btn="确定" cancel-btn="取消"
        :on-close="() => createRoomVisiable = false" :on-confirm="onCreateRoomConfirm">
        <template #header>输入房间名称</template>
        <template #body>
            <t-input v-model="roomname" />
        </template>
    </t-dialog>
    <t-dialog :visible="userVisiable" :close-btn="true" confirm-btn="确定" cancel-btn="取消"
        :on-close="() => userVisiable = false" :on-confirm="onUserConfirm">
        <template #header>输入用户名称</template>
        <template #body>
            <t-input v-model="username" />
        </template>
    </t-dialog>
</template>
<style>
.center-page {
    position: relative;
    height: 720px;
    width: 720px;
    left: 50%;
    top: 50px;
    transform: translate(-50%, 10%);
}
</style>